<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时词云生成器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 粒子背景 */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            height: calc(100% - 5.21vw);
        }

        /* 用户输入区域 */
        .input-section {
            background: rgba(25, 30, 60, 0.7);
            border-radius: 15px;
            padding: 25px;
            /*margin: 30px auto;*/
            max-width: 800px;
            border: 1px solid rgba(79, 172, 254, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 30, 0.5);
            backdrop-filter: blur(10px);
            text-align: center;
            height: 11vw;
            display: flex;
            flex-direction: column;
            justify-items: center;
            justify-content: center;
        }

        .input-section h2 {
            color: #4facfe;
            margin-bottom: 25px;
            font-size: 2rem;
            position: relative;
            padding-bottom: 15px;
        }

        .input-section h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background: linear-gradient(to right, transparent, #00f2fe, transparent);
        }

        .input-group {
            display: flex;
            gap: 15px;
            /*margin: 25px 0;*/
            justify-content: center;
            flex-wrap: wrap;
        }

        .input-group input {
            flex: 1;
            min-width: 250px;
            padding: 15px 20px;
            border: 2px solid rgba(79, 172, 254, 0.5);
            border-radius: 50px;
            background: rgba(15, 20, 40, 0.6);
            color: #fff;
            font-size: 1.1rem;
            outline: none;
            transition: all 0.3s ease;
        }

        .input-group input:focus {
            border-color: #00f2fe;
            box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
        }

        .input-group input::placeholder {
            color: #7a85cc;
        }

        .btn {
            padding: 15px 35px;
            background: linear-gradient(to right, #00f2fe, #4facfe);
            border: none;
            border-radius: 50px;
            color: #16213e;
            font-weight: bold;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 242, 254, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 242, 254, 0.5);
        }

        .btn:active {
            transform: translateY(0);
        }

        /* 词云容器 */
        .word-cloud-container {
            /*width: 100%;*/
            /*height: 50vh;*/
            /*min-height: 500px;*/
            /*perspective: 1200px;*/
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            /*margin: 30px auto;*/
            height: calc(100% - 11vw);
        }

        .word-cloud {
            position: relative;
            width: 80%;
            height: 80%;
            transform-style: preserve-3d;
            animation: rotate 36s infinite linear;
        }

        .word {
            position: absolute;
            font-weight: bold;
            transition: all 0.4s ease;
            cursor: default;
            text-shadow: 0 0 10px currentColor;
            user-select: none;
            white-space: nowrap;
            opacity: 0.9;
        }

        .word:hover {
            transform: scale(1.2) !important;
            z-index: 100 !important;
            text-shadow: 0 0 20px currentColor;
            opacity: 1;
        }

        /* 关键词颜色 */
        .primary { color: #00f2fe; } /* 青色 - 核心词 */
        .secondary { color: #4facfe; } /* 蓝色 */
        .tertiary { color: #9d4edd; } /* 紫色 */
        .accent { color: #ff6b6b; } /* 红色 */
        .highlight { color: #ffd166; } /* 黄色 */

        /* 3D旋转动画 */
        @keyframes rotate {
            0% { transform: rotateY(0deg) rotateX(10deg); }
            100% { transform: rotateY(360deg) rotateX(10deg); }
        }

        /* 信息面板 */
        .info-panel {
            background: rgba(25, 30, 60, 0.7);
            border-radius: 15px;
            padding: 25px;
            margin: 40px auto;
            max-width: 800px;
            border: 1px solid rgba(79, 172, 254, 0.3);
            box-shadow: 0 10px 30px rgba(0, 0, 30, 0.5);
            backdrop-filter: blur(10px);
        }

        .info-panel h2 {
            color: #4facfe;
            text-align: center;
            margin-bottom: 25px;
            font-size: 2.2rem;
            position: relative;
            padding-bottom: 15px;
        }

        .info-panel h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background: linear-gradient(to right, transparent, #00f2fe, transparent);
        }

        .concept-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .concept-card {
            background: rgba(35, 40, 75, 0.6);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid rgba(79, 172, 254, 0.2);
            transition: all 0.3s ease;
        }

        .concept-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 242, 254, 0.15);
            border-color: rgba(79, 172, 254, 0.5);
        }

        .concept-card h3 {
            color: #00f2fe;
            margin-bottom: 12px;
            font-size: 1.4rem;
            display: flex;
            align-items: center;
        }

        .concept-card h3 i {
            margin-right: 10px;
            font-size: 1.2rem;
        }

        .concept-card p {
            color: #c0c8ff;
            line-height: 1.6;
            font-size: 0.95rem;
        }

        footer {
            text-align: center;
            padding: 30px 0;
            color: #7a85cc;
            font-size: 0.9rem;
            margin-top: 30px;
            border-top: 1px solid rgba(79, 172, 254, 0.1);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            header h1 { font-size: 2.5rem; }
            .subtitle { font-size: 1rem; }
            .word-cloud-container { height: 50vh; min-height: 400px; }
            .concept-grid { grid-template-columns: 1fr; }
            .input-group { flex-direction: column; }
            .input-group input { width: 100%; }
        }
    </style>
</head>
<body>
<!-- 粒子背景 -->
<div id="particles-js"></div>
<div class="header">
    <h1>实时词云生成器</h1>
</div>
<div class="container">
    <!-- 用户输入区域 -->
    <div class="input-section">
<!--        <h2>添加关键词</h2>-->
        <div class="input-group">
            <input type="text" id="wordInput" placeholder="输入关键词（如：人工智能）" maxlength="20">
            <button class="btn" id="addWordBtn"><i class="fas fa-plus-circle"></i> 添加到词云</button>
        </div>
        <p style="color: #a0a8e0; margin-top: 10px;">提示：输入关键词后点击按钮添加到词云中，重复添加会增加关键词权重</p>
    </div>

    <!-- 词云展示区域 -->
    <div class="word-cloud-container">
        <div class="word-cloud" id="wordCloud"></div>
    </div>


</div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
    // 初始化粒子背景
    particlesJS("particles-js", {
        particles: {
            number: { value: 80, density: { enable: true, value_area: 800 } },
            color: { value: "#4facfe" },
            shape: { type: "circle" },
            opacity: { value: 0.5, random: true },
            size: { value: 3, random: true },
            line_linked: {
                enable: true,
                distance: 150,
                color: "#00f2fe",
                opacity: 0.2,
                width: 1
            },
            move: {
                enable: true,
                speed: 1,
                direction: "none",
                random: true,
                straight: false,
                out_mode: "out",
                bounce: false
            }
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: { enable: true, mode: "repulse" },
                onclick: { enable: true, mode: "push" },
                resize: true
            }
        },
        retina_detect: true
    });

    // 词云数据 - 关键词、大小和分类
    const initialWords = [
        { text: "新技术", size: 60, category: "primary" },
        { text: "骄傲", size: 55, category: "primary" },
        { text: "智能化", size: 52, category: "primary" },
        { text: "震撼", size: 48, category: "secondary" },
        { text: "数字化", size: 45, category: "secondary" },
        { text: "效率", size: 42, category: "secondary" },
        { text: "绿色", size: 40, category: "tertiary" },
        { text: "未来", size: 38, category: "tertiary" },
        { text: "元宇宙", size: 36, category: "tertiary" },
        { text: "虚拟现实", size: 32, category: "highlight" },
        { text: "云计算", size: 30, category: "highlight" },
        { text: "数据安全", size: 28, category: "highlight" },
    ];

    // 存储当前所有关键词
    let words = [...initialWords];
    let wordCounts = {};

    // 初始化词计数
    initialWords.forEach(word => {
        wordCounts[word.text] = (wordCounts[word.text] || 0) + 1;
    });

    // 生成3D词云
    function createWordCloud() {
        const cloud = document.getElementById('wordCloud');
        cloud.innerHTML = ''; // 清空当前词云

        const radius = Math.min(300, window.innerWidth / 7); // 球体半径
        const centerX = cloud.offsetWidth / 2;
        const centerY = cloud.offsetHeight / 2;

        // 按词频排序
        words.sort((a, b) => (wordCounts[b.text] || 0) - (wordCounts[a.text] || 0));

        words.forEach((word, index) => {
            // 在球面上分布
            const phi = Math.acos(-1 + (2 * index) / words.length);
            const theta = Math.sqrt(words.length * Math.PI) * phi;

            // 转换为笛卡尔坐标
            const x = centerX + radius * Math.cos(theta) * Math.sin(phi);
            const y = centerY + radius * Math.sin(theta) * Math.sin(phi);
            const z = radius * Math.cos(phi);

            const wordElement = document.createElement('div');
            wordElement.className = `word ${word.category}`;
            wordElement.textContent = word.text;
            wordElement.style.fontSize = `${word.size}px`;
            wordElement.style.left = `${x}px`;
            wordElement.style.top = `${y}px`;
            wordElement.style.transform = `translate(-50%, -50%) translateZ(${z}px)`;
            wordElement.dataset.word = word.text;
            wordElement.dataset.count = wordCounts[word.text] || 1;

            cloud.appendChild(wordElement);

            // 添加鼠标悬停效果
            wordElement.addEventListener('mouseenter', () => {
                wordElement.style.zIndex = '1000';
                // 显示计数
                wordElement.textContent = `${word.text} (${wordElement.dataset.count})`;
            });

            wordElement.addEventListener('mouseleave', () => {
                wordElement.style.zIndex = '1';
                wordElement.textContent = word.text;
            });
        });
    }

    // 添加新词到词云
    function addWordToCloud() {
        const wordInput = document.getElementById('wordInput');
        const newWord = wordInput.value.trim();

        if (!newWord) {
            alert('请输入关键词');
            return;
        }

        if (newWord.length > 20) {
            alert('关键词过长，请控制在20个字符以内');
            return;
        }

        // 更新词频计数
        wordCounts[newWord] = (wordCounts[newWord] || 0) + 1;

        // 检查是否已经存在
        const existingWord = words.find(w => w.text === newWord);

        if (existingWord) {
            // 如果已存在，增加大小（最大限制）
            existingWord.size = Math.min(existingWord.size + 8, 80);
        } else {
            // 添加新词
            const categories = ['primary', 'secondary', 'tertiary', 'accent', 'highlight'];
            const randomCategory = categories[Math.floor(Math.random() * categories.length)];

            words.push({
                text: newWord,
                size: 30 + (Math.random() * 20), // 初始大小30-50px
                category: randomCategory
            });
        }

        // 重新生成词云
        createWordCloud();

        // 清空输入框
        wordInput.value = '';
        wordInput.focus();
    }

    // 事件监听
    document.getElementById('addWordBtn').addEventListener('click', addWordToCloud);

    // 支持按Enter键添加
    document.getElementById('wordInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            addWordToCloud();
        }
    });

    // 页面加载完成后初始化
    window.addEventListener('load', createWordCloud);

    // 响应窗口大小变化
    window.addEventListener('resize', createWordCloud);
</script>
</body>
</html>